<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 商品列表卡片 -->

    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            @clear="closeShop"
            placeholder="请输入内容"
            v-model="ShopForm.query"
            class="input-with-select"
            clearable
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getShopList"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4"
          ><el-button type="primary" @click="addShopPush"
            >添加商品</el-button
          ></el-col
        >
      </el-row>
      <template>
        <el-table :data="ShopList" border style="width: 100%">
          <el-table-column type="index" label="#"> </el-table-column>
          <el-table-column label="商品名称" width="350">
            <template slot-scope="scope">
              <span v-html="showDate(scope.row.goods_name)"></span>
            </template>
          </el-table-column>
          <el-table-column prop="goods_price" label="商品价格(元)">
          </el-table-column>
          <el-table-column prop="goods_weight" label="商品重量">
          </el-table-column>
          <el-table-column label="创建时间">
            <template slot-scope="scope">
              {{ scope.row.add_time | FormData }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                @click="editShop(scope.row)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="delShop(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <!-- 修改商品信息对话框 -->
      <el-dialog
        title="修改商品信息"
        :visible.sync="editGoodVisible"
        width="40%"
      >
        <el-form label-position="left" label-width="80px" :model="editShopForm">
          <el-form-item label="商品名称">
            <el-input v-model="editShopForm.goods_name"></el-input>
          </el-form-item>
          <el-form-item label="价格">
            <el-input
              type="number"
              v-model="editShopForm.goods_price"
            ></el-input>
          </el-form-item>
          <el-form-item label="数量">
            <el-input
              type="number"
              v-model="editShopForm.goods_number"
            ></el-input>
          </el-form-item>
          <el-form-item label="重量">
            <el-input
              type="number"
              v-model="editShopForm.goods_weight"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品介绍">
            <el-input
              type="textarea"
              v-model="editShopForm.goods_introduce"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editGoodVisible = false">取 消</el-button>
          <el-button type="primary" @click="editGoodInfo">确 定</el-button>
        </span>
      </el-dialog>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="ShopForm.pagenum"
        :page-sizes="[5, 6, 8, 10]"
        :page-size="ShopForm.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="ShopForm.total"
      >
      </el-pagination>
      <!-- 增加商品Form表单 -->
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addShopVisible: false,
      editGoodVisible: false,
      ShopList: [],
      addShopForm: {
        goods_name: "",
        goods_cat: "",
      },
      currentid: "",
      editShopForm: {
        goods_name: "",
        goods_price: 0,
        goods_number: 0,
        goods_weight: 0,
        goods_introduce: "",
      },
      ShopForm: {
        query: "",
        pagenum: 1,
        pagesize: 10,
        total: null,
      },
    };
  },
  // computed: {
  //   tables: function() {
  //     const search = this.ShopForm.query;
  //     if (search) {
  //       return this.ShopList.filter((dataNews) => {
  //         return Object.keys(dataNews).some((key) => {
  //           return (
  //             String(dataNews[key])
  //               .toLowerCase()
  //               .indexOf(search) > -1
  //           );
  //         });
  //       });
  //     }
  //     return this.ShopList;
  //   },
  // },
  filters: {
    FormData(val) {
      var date = new Date(val);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDay();

      return (date + "").substr(10, 14);
    },
  },
  mounted() {
    this.getShopList();
  },
  methods: {
    // 获取商品列表信息
    async getShopList() {
      const { data: res } = await this.$axios.get("goods", {
        params: {
          query: this.ShopForm.query,
          pagenum: this.ShopForm.pagenum,
          pagesize: this.ShopForm.pagesize,
        },
      });
      this.ShopForm.total = res.data.total;
      this.ShopList = res.data.goods;
      console.log(res);
    },

    showDate(val) {
      val = val + "";
      if (val.indexOf(this.ShopForm.query) !== -1 && this.ShopForm.query !== "") {
        return val.replace(
          this.ShopForm.query,
          '<font color="#409EFF">' + this.ShopForm.query + "</font>"
        );
      } else {
        return val;
      }
    },

    // 改变页码触发
    handleSizeChange(newpagesize) {
      this.ShopForm.pagenum = 1;
      this.ShopForm.pagesize = newpagesize;
      this.getShopList();
    },

    // 改变页数触发
    handleCurrentChange(newpagenum) {
      this.ShopForm.pagenum = newpagenum;
      this.getShopList();
    },

    // 点击确定增加商品
    addShop() {},

    // 点击清除搜索框信息
    closeShop() {
      // console.log("清除");
      this.getShopList();
    },

    // 点击删除商品
    async delShop(row) {
      // console.log(row);
      const flag = await this.$confirm(
        "此操作将永久删除该商品, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (flag == "confirm") {
        const { data: res } = await this.$axios.delete("goods/" + row.goods_id);
        if (res.meta.status == 200) {
          this.$message.success("删除商品成功");
          this.getShopList();
        }
      }
    },

    // 点击修改商品信息
    editShop(row) {
      this.currentid = row.goods_id;
      this.editShopForm.goods_name = row.goods_name;
      this.editShopForm.goods_price = row.goods_price;
      this.editShopForm.goods_number = row.goods_number;
      this.editShopForm.goods_weight = row.goods_weight;
      this.editShopForm.goods_introduce = row.goods_introduce;
      this.editGoodVisible = true;
      // console.log(row);
    },

    //点击确认修改商品
    async editGoodInfo() {
      console.log(this.currentid);
      const { data: res } = await this.$axios.put(
        "goods/" + this.currentid,
        this.editShopForm
      );
      console.log(res);
      // if(res.meta.status == 200){
      // }
      this.editGoodVisible = false;
    },

    // 点击跳转添加商品页
    addShopPush() {
      this.$router.push("/home/goods/add");
    },
  },
};
</script>
<style>
.el-alert {
  user-select: none;
}
</style>

<style module></style>
